[v-cloak] {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  min-width: 1174px;
}

i {
  font-style: normal;
}

@font-face {
  font-family: DejaVuSansMono;
  src: url('./fonts/DejaVuSansMono.ttf');
}

.top {
  width: 100vw;
  backdrop-filter: blur(3px);
  /* box-shadow: rgb(0 0 0 / 10%) 0px 2px 5px 0px; */
  position: fixed;
  background: #ffffff85;
  border-bottom: 1px solid #e2e2e2;
  top: 0;
  z-index: 999;
}

.topnav {
  height: var(--nav-height);
  margin-left: auto;
  margin-right: auto;
  transition: .3s;
  min-width: 1312px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  min-width: 1312px;
  transition: .3s;
  margin-top: 60px;
}

@media (min-width: 1120px) {
  .topnav {
    padding-left: 48px;
    padding-right: 48px;
    max-width: 1312px;
  }
  .container {
    padding-left: 48px;
    padding-right: 48px;
    max-width: 1312px;
  }
}

@media (max-width: 1119px) {
  .topnav {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 944px;
  }
  .container {
    padding-left: 48px;
    padding-right: 48px;
    max-width: 944px;
  }
}

.topnav [name=logo] {
  height: 28px;
  position: relative;
  top: calc(50% - 14px);
  float: left;
}

.topnav [name=menu] {
  height: 100%;
  width: calc(100% - 95px - 30px - 40px - 30px - 40px);
  float: left;
  margin: 0 0 0 30px;
  padding: 0;
}

.topnav [name=menu]>li {
  list-style: none;
  float: left;
  cursor: pointer;
  line-height: 60px;
  min-width: 120px;
  text-align: center;
  height: 100%;
  color: #323339;
  transition: .2s;
  font-size: 14px;
  font-weight: 600;
  font-family: "metro-web", "Metro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.topnav [name=menu]>li>a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.topnav [name=menu] li:hover {
  color: #000;
}

.vertical-divider {
  background: #dcdde0;
  height: 1.75rem;
  width: 1px;
  float: left;
  margin-top: 15px;
}

.topnav [name=avatar] {
  position: relative;
  top: calc(50% - 20px);
  cursor: pointer;
  float: left;
  margin-left: 15px;
}

.topnav [name=username] {
  width: 40px;
  margin-left: 15px;
  line-height: 60px;
  cursor: pointer;
  font-size: 14px;
  color: #7d7d7d;
  transition: .3s;
  float: left;
}

.topnav [name=username]:hover {
  color: #373737;
}

.gitlab {
  border: 1px solid rgba(29, 30, 35, .2);
  display: flex;
  width: 32px;
  height: 32px;
  background: #fff;
  transition: .25s;
  margin-top: 13px;
  margin-left: 30px;
}

.gitlab:hover {
  background: #e6e6e6;
  border-color: transparent;
}

.gitlab img {
  width: 16px;
  height: 16px;
  margin: auto;
  position: relative;
  top: -12px;
}

.button {
  background: #ca2171;
  color: #fff;
}

.select-box {
  list-style: none;
  display: inline;
  padding-left: 10px;
}

.select-box [name=dcList] {
  border-radius: 4px;
  box-shadow: 0 8px 12px rgb(37 38 45 / 30%);
  background: #fff;
  padding: 5px;
}

.select-box [name=dcList]>i {
  display: block;
  height: 40px;
  line-height: 40px;
  transition: .2s;
  text-decoration: underline;
  text-decoration-color: #0000;
}

.select-box [name=dcList]>i:hover {
  text-decoration-color: #000;
}

.dropdown-trigger:after {
  content: "\e6df";
  font-family: element-icons!important;
  font-size: 12px;
}

* {
  --nav-height: 60px;
  --theme-color: #ca2171;
  --theme-color-hover: #f02986;
  --theme-color-background: #fae9f1;
  --warn: #F56C6C;
}